<template>
  <div class="box_yj sectionss" ref="parent">
    <span></span>
    <div class="section-header">2020年出台政策趋势情况</div>
    <div class="tab-header">
      <el-radio-group v-model="radio" size="mini" class="radio-group" @change="handleChange">
        <el-radio-button label="阅读量"></el-radio-button>
        <el-radio-button label="发稿量"></el-radio-button>
      </el-radio-group>
    </div>
    <div ref="charts01" :style="chartsDom" v-show="jz"></div>
             <animae-jz   :style="chartsDom" v-if="!jz"></animae-jz>
    <div ref="charts02" :style="chartsDom" v-show="jz2"></div>
             <animae-jz   :style="chartsDom" v-if="!jz2"></animae-jz>
  </div>
</template>
<script>
import { getPolicyPolicyAdvisoryReleasesByMonth, getPolicyPolicyAdvisoryReleases, getReadingTime } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      radio: '阅读量',
      chart01Data: [],
      chart02Data: [],
      jz:true,
      jz2:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: (this.height - 60 - 31 - 15)/2 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.init();
  },
  methods: {
    handleChange() {
      this.$nextTick(_=>{
        this.init();
      });
    },
    init() {
      this.jz=false
      this.jz2=false
      if(this.radio === '阅读量') {
        getPolicyPolicyAdvisoryReleasesByMonth(this.dateProp)
        .then(({data:{data}})=>{
          this.jz=true
          if(data&&data.length > 0){
            this.chart01Data = data;
            this.$nextTick(_=>{
              this.drawBar();
            })
          }else{
            this.chart01Data = null;
          }
        })
      }else{
        getPolicyPolicyAdvisoryReleases({year:this.formatDate(new Date(),'YYYY')})
        .then(({data:{data}})=>{
       
          if(data&&data.length > 0){
            this.chart01Data = data;
            this.$nextTick(_=>{
              this.drawBar();
            })
          }else{
            this.chart01Data = null;
          }
        })
      }
      getReadingTime(this.dateProp)
      .then(({data:{data}})=>{
           this.jz2=true
        if(data&&data.length > 0){
          this.chart02Data = data;
          this.$nextTick(_=>{
            this.drawPolarBar();
          })
        }else{
          this.chart02Data = null;
        }
      })
    },
    drawBar() {
      let option = {
          grid: {
            top: 15,
            bottom: 20
          },
          xAxis: {
              type: 'category',
              data: this.chart01Data.map(v=>v.name),
              axisLabel: {
                textStyle: {
                  color: 'rgba(255,255,255,1)'
                }
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              }
          },
          yAxis: {
              type: 'value',
              axisLabel: {
                textStyle: {
                  color: 'rgba(255,255,255,.3)'
                }
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              }
          },
          series: [{
              data: this.chart01Data.map(v=>v.value),
              type: 'bar',
              barWidth: 30,
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    [
                        {offset: 0, color: '#2a8ad0'},
                        {offset: 1, color: '#3af3ce'}
                    ]
                )
              }
          }]
      };
      let chartsInit = this.$echarts.init(this.$refs.charts01);
      chartsInit.setOption(option);
    },
    drawPolarBar() {
      let option = {
          angleAxis: {
              type: 'category',
              data: this.chart02Data.map(v=>v.name),
              axisLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)',
                }
              }
          },
          radiusAxis: {
            splitLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)',
              }
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          polar: {
          },
          series: [{
              type: 'bar',
              data: this.chart02Data.map(v=>v.value),
              coordinateSystem: 'polar',
              name: 'A',
              stack: 'a',
              itemStyle: {
                color: '#37a2da'
              }
          }]
      };
      let chartsInit = this.$echarts.init(this.$refs.charts02);
      chartsInit.setOption(option);
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
  .tab-header
    width 100%
    height 30px
    overflow hidden
    margin-top 15px
  .radio-group
    position relative
    z-index 1000
    >>> .el-radio-button.is-active .el-radio-button__inner
      background-color #037880
      color #ffffff
      box-shadow -1px 0 0 #037880
    >>> .el-radio-button__inner
      background-color transparent
      color #35ced8
      border 1px solid #037880
</style>